<template>
	<view class="content padding">
		<view class="priceBox">
			<view class="color_ling text_g">
				实付金额
			</view>
			<view class="margin_top">
				<text class="price">￥{{payprice}}</text>
			</view>
		</view>
		<view class="margin_top padding ffffff border">
			<view class="color_san text_g">
				选择支付方式
			</view>
			<!-- 微信 -->
			<view class="paddingtb border_bottom flexbetween" @click="pay_type=1">
				<view class="flexleft">
					<image class="margin_right3 imgBox" src="/static/image/home/weixin.png" mode=""></image>
					<view class="color_san text_a">
						微信
					</view>
				</view>
				<view class="">
					<view class="xuanzhongs" v-if="pay_type==1"></view>
					<view class="wiexuanzhongs" v-if="pay_type!=1"></view>
				</view>
			</view>
			<!-- 支付宝 -->
			<view class="paddingtb border_bottom flexbetween" @click="pay_type=2">
				<view class="flexleft">
					<image class="margin_right3 imgBox" src="/static/image/home/zhifubao.png" mode=""></image>
					<view class="color_san text_a">
						支付宝
					</view>
				</view>
				<view class="">
					<view class="xuanzhongs" v-if="pay_type==2"></view>
					<view class="wiexuanzhongs" v-if="pay_type!=2"></view>
				</view>
			</view>
		</view>
		<!-- 立即支付 -->
		<view class="footer padding">
			<view class="footerButton" @click="payOrder">
				立即支付
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				pay_type: 1,
				payprice: "",
				wxPayMsg: {},
				zfbMsg: "",
				vip_card_id: "", //套餐id
			}
		},
		onLoad(options) {
			this.vip_card_id = options.id
			this.payprice = options.price
			console.log(options);
		},
		methods: {
			payOrder() {
				let _this=this
				httpRequest.request("/api/shop.index/create_order", 'POST', {
					vip_card_id:_this.vip_card_id,
					pay_type:_this.pay_type
				}, false, false, true).then(res => {
					if (res.code == 1) {
						if (Number(this.payprice) == 0) {
							httpRequest.toast("支付成功")
							setTimeout(() => {
								uni.navigateBack(1)
							}, 500)
							return false
						}
						if (this.pay_type == 1) { //微信支付
							this.wxPayMsg = res.data.wxconfig
							console.log(JSON.stringify(this.wxPayMsg))
							this.wxPay()
						} else { //支付宝支付
							this.zfbMsg = res.data.aliconfig
							console.log(JSON.stringify(this.zfbMsg))
							// return false
							this.zfbPay()
						}
					} else {
						httpRequest.toast(res.msg);
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			wxPay() {
				let _this = this
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo: _this.wxPayMsg, //后台返回的支付数据
					success: function(res) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			zfbPay() {
				let _this = this
				uni.requestPayment({
					provider: 'alipay',
					orderInfo: _this.zfbMsg, //后台返回的支付数据
					success: function(res) {
						console.log(res, 99999999)
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					},
					fail: function(err) {
						console.log(err)
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.priceBox {
		display: flex;
		flex-direction: column;
		align-items: center;

		.price {
			font-size: 71rpx;
			font-family: DIN-Bold, DIN;
			font-weight: bold;
			color: #FF0000;
		}
	}

	.border_bottom {
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
		// border-bottom: 2rpx solid red;
	}

	.imgBox {
		width: 42rpx;
		height: 42rpx;
	}
</style>